<template>
  <div>
    <el-table
      :data="value.cartList"
      style="width: 100%"
      stripe
      show-summary
      :summary-method="getSummaries"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品图片" width="180">
        <template slot-scope="scope">
          <img class="productImage" style="margin-left: 10px" :src="scope.row.productImage" />
        </template>
      </el-table-column>

      <el-table-column label="商品名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.productName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="单价" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">￥{{ scope.row.salePrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="数量" width="180">
        <template slot-scope="scope">
          <el-input-number
            size="small"
            v-model="scope.row.productNum"
            @change="handleChange"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </template>
      </el-table-column>

      <el-table-column label="小计" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">￥{{ scope.row.productNum*scope.row.salePrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import user from "../../models/user";
export default {
  data() {
    return {
      value: {},
      tableData: [
        {
          num: 2,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          num: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        }
      ]
    };
  },
  async mounted() {
    console.log(this.$cookie.get("userID"));
    var data = await user(this.$cookie.get("userID"));
    this.value = data.data.res[0];
    console.log(this.value);
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleChange(e) {
      console.log(e);
    },

    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      var sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        console.log(data);
      });
      var num = 0;
      data.forEach(res => {
        num += Number(res.productNum * res.salePrice);
      });
      sums = ["总价", "", "", "", "", "", `￥${num}`];
      return sums;
    }
  }
};
</script>

<style scoped>
.productImage {
  width: 100px;
}
</style>